<template>
  <el-container style="border: 1px solid #eee;height:100%">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)" v-show="aside_show">
      <el-menu :default-openeds="default_menu">
        <el-submenu v-for="(item,index) in nav_bar" :key="index" :index="item.index">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>{{item.name}}</span>
          </template>
          <el-menu-item @click="navFunc(child_menu,item)" v-for="(child_menu,index) in item.childs" :key="index" :index="child_menu.index">{{child_menu.name}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="bg-purple" style="height:30px">
      </el-header>
      <el-main style="height:100%">
        <div id="app">
          <router-view/>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

export default {
  name: 'App',
  data() {
    return {
      aside_show: true,
      default_menu: ['1'],
      nav_bar: [
        {
          name: '首页',
          index: '1',
          open: false,
          childs: [
            {
              name: '首页大图编辑',
              url: '/admin',
              index: '1-1',
              isactive: 'false'
            },
            {
              name: '首页视频编辑',
              url: '/admin/index/video',
              index: '1-2',
              isactive: 'false'
            }
          ]
        },
        {
          name: '品牌介绍',
          index: '2',
          open: false,
          childs: [
            {
              name: '大图编辑',
              url: '/admin/brand_big_img',
              index: '2-2',
              isactive: 'false'
            },
            {
              name: '错位图编辑',
              url: '/admin/brand_img_cw',
              index: '2-3',
              isactive: 'false'
            }
          ]
        },
        {
          name: 'LOOKBOOK',
          index: '3',
          open: false,
          childs: [
            {
              name: '页面图文编辑',
              url: '/admin/lookbook',
              index: '3-1',
              isactive: 'false'
            }
          ]
        },
        {
          name: '产品',
          index: '4',
          open: false,
          childs: [
            {
              name: '分类菜单编辑',
              url: '/admin/product_menu',
              index: '4-1',
              isactive: 'false'
            },
            {
              name: '商品录入',
              url: '/admin/product_add',
              index: '4-2',
              isactive: 'false'
            }
          ]
        },
        {
          name: '店铺信息',
          index: '5',
          open: false,
          childs: [
            {
              name: '店铺信息编辑',
              url: '/admin/shop_information',
              index: '5-1',
              isactive: 'false'
            }
          ]
        },
        {
          name: '社交媒体',
          index: '6',
          open: false,
          childs: [
            {
              name: '社交媒体编辑',
              url: '/admin/media',
              index: '6-1',
              isactive: 'false'
            }
          ]
        },
        {
          name: '会员中心',
          index: '7',
          open: false,
          childs: [
            {
              name: '文字编辑',
              url: '/admin/member',
              index: '7-1',
              isactive: 'false'
            }
          ]
        },
        {
          name: '联系我们',
          index: '8',
          open: false,
          childs: [
            {
              name: '背景图上传',
              url: '/admin/contact_bg',
              index: '8-1',
              isactive: 'false'
            },
            {
              name: '联系方式上传',
              url: '/admin/contact_way',
              index: '8-2',
              isactive: 'false'
            }
          ]
        }
      ]
    }
  },
  methods: {
    login() {
      var userID = sessionStorage.getItem('username')
      if (!userID) {
        this.$router.push('/login')
      }
    },
    navFunc(item, itemF) {
      var _this = this
      _this.$router.push(item.url)
    }
  },
  mounted() {
    var _this = this
    if (this.$route.path == '/login') {
      _this.aside_show = false
    } else {
      _this.aside_show = true
    }
    this.login()
  },
  watch: {
    $route(to, from) {
      var _this = this
      if (to.path == '/login') {
        _this.aside_show = false
      } else {
        _this.aside_show = true
      }
    }
  }
}
</script>

<style>
html,
body {
  height: 100%;
  overflow: hidden;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  height: 100%;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.show_menu {
  display: block !important;
}
</style>
